<template>
  <div class="app-container">
    <el-card class="box-card">
       胡娟
        <CompanysForm
        :formInline="formDate"
        @resetForms="resetForms"
        @searchBtns="searchBtns"
        />
        <div class="addcom" style="margin-top: -60px;" >
          <el-button icon="el-icon-edit" type="success" size="small" @click="companysAd">新增用户</el-button>
        </div>
        <CompanysTable
        :formDate="formDate"
        :CurrentChange="CurrentChange"
        :tableData="tableData"
        @handleSChange="handleSChange"
        @handleCChange="handleCChange"
        @companysUpdate="companysUpdate"
        @onState="onState"
        />
    </el-card>
    <CompanysAdd
   :CurrentChange="CurrentChange"
    v-if="dialogFormVisible"
    :dialogFormVisible.sync="dialogFormVisible"
    @onCloseDialog="onCloseDialog"
    :formBase="formBase"
    :title="title"
    :formInfo="formInfo"
    @onAdd="loadlist"
    @upDate="upDate"
    />
  </div>
</template>

<script>

import { list } from '@/api/hmmm/companys.js'
import CompanysForm from '../components/companys-from.vue'
import CompanysTable from '../components/companys-table.vue'
import CompanysAdd from '../components/companys-add.vue'
export default {
  name: 'companys',
  components: {
    CompanysForm,
    CompanysTable,
    CompanysAdd
  },
  data () {
    return {
      formInfo: {},
      title: '',
      dialogFormVisible: false,
      formDate: {
        tags: '',
        province: '',
        city: '',
        shortName: '',
        state: null,
        page: 1,
        pagesize: 10
      },
      formBase: {
        tags: '',
        province: '',
        city: '',
        shortName: '',
        id: '',
        remarks: '',
        company: ''
      },
      tableData: {},
      CurrentChange: {
        page: 1,
        pagesize: 10
      },
      flag: 0
    }
  },

  created () {
    this.loadlist()
  },

  methods: {
    onCloseDialog () {
      this.dialogFormVisible = false
      this.formBase = {
        tags: '',
        province: '',
        city: '',
        shortName: '',
        remarks: '',
        company: '',
        id: '',
        number: '',
        isFamous: '',
        page: 1,
        pagesize: 10
      }
    },
    // 重置表单
    resetForms () {
      this.formDate.tags = ''
      this.formDate.province = ''
      this.formDate.city = ''
      this.formDate.shortName = ''
      this.formDate.state = null
      this.formDate.page = 1
      this.formDate.pagesize = 10
      this.loadlist()
    },
    // 搜索
    searchBtns (data) {
      this.handleChange(data)
    },
    // 获取企业数据
    async loadlist () {
      const res = await list()
      this.tableData = res.data
    },
    // 添加
    companysAd () {
      this.formBase.isFamous = true
      this.dialogFormVisible = true
      this.title = '创建用户'
    },
    // 编辑
    companysUpdate (row) {
      this.dialogFormVisible = true
      this.title = '编辑用户'
      const { page, pagesize } = this.formDate
      const { tags, province, city, shortName, remarks, company, id, number, isFamous } = row
      this.formBase = { tags, province, city, shortName, remarks, company, id, number, isFamous, page, pagesize }
      // this.formBase = row
      if (this.formBase.isFamous === 0) {
        this.formBase.isFamous = true
      } else {
        this.formBase.isFamous = false
      }
    },
    // 分页
    async handleChange (data) {
      const res = await list(data)
      this.tableData = res.data
    },
    // 每页条数
    handleSChange (val) {
      this.CurrentChange.pagesize = val
      this.formBase.pagesize = val
      this.formDate.pagesize = val
      this.handleChange(this.CurrentChange)
    },
    // 页数切换
    handleCChange (val) {
      this.CurrentChange.page = val
      this.formBase.page = val
      this.formDate.page = val
      this.handleChange(this.CurrentChange)
    },
    // 状态切换，页面渲染
    onState (data) {
      this.handleChange(data)
    },
    // 编辑刷新
    upDate (data) {
      this.handleChange(data)
    }
  }
}
</script>

<style scoped lang='less'>
.addcom{
  display: flex;
  justify-content: flex-end;
}
</style>
